<template>
	<view class="wanl-money">
		<wanl-navbar :isBack="true" :background="{background: '#fff',}" :showGongNeng="true">
			<text
				slot="content"
				style="color: #000; width: 100%;padding-left: 20rpx;"
			>
				商品上新
			</text>
		</wanl-navbar>
		<view class="edgeInsetTop">
			<view style="font-size: 34rpx" :class="chooseActive == '1'?'active':''" @click="choose(1)">拼团</view>
			<view style="font-size: 34rpx" :class="chooseActive == '2'?'active':''" @click="choose(2)">上新</view>
		</view>
		<view class="cu-list menu-avatar" v-if="chooseActive == '1'">
			<!-- 商品 -->
			<wanl-product :dataList="likeData" dataType="groups" :jinyuanbao="true" :showTag="false"/>
		</view>
		<view class="cu-list menu-avatar" v-if="chooseActive == '2'">
			<wanl-product :dataList="likeData" :jinyuanbao="true"/>
		</view>
		<!-- 空 -->
		<view v-if="likeData.length == 0 && loading == false">
			<wanl-empty src="ticket_default3x" text="暂无商品"/>
		</view>
		<view class="edgeInsetBottom"></view>
		<uni-load-more :status="status" :content-text="contentText" />
	</view>
</template>

<script>

export default {
	data() {
		return {
			dataList: [],
			loading:true,
			reload: false, //判断是否上拉
			total: 0, //数据量
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'more',
			contentText: {
				contentdown: ' ',
				contentrefresh: '加载中',
				contentnomore: ''
			},
			zhongjiangTotal:'',
			likeData: [],
			chooseActive:'1'
		};
	},
	computed: {
	
	},
	onShow() {
		this.current_page = 1;
		this.reload = true;
		this.dataList = [];
		this.loadlikeData();
	},
	onPullDownRefresh() {
		this.current_page = 1;
		this.reload = true;
		this.loadlikeData();
	},
	onReachBottom() {
		//判断是否最后一页
		if (this.current_page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.reload = false;
			this.current_page = this.current_page + 1; //页码+1
			this.status = 'loading';
			this.loadlikeData();
		}
	},
	methods: {
		// 滚动底部加载猜你喜欢
		loadlikeData() {
			let url = '';
			if(this.chooseActive == '1'){
				url='/Wanlshop/groups/Product/goldRecommend'
			}else{
				url='/Wanlshop/Page/goldGoods'
			}
			console.log("===url",url)
			uni.request({
				url: url,
				data: {
					page: this.current_page,
					// type:this.chooseActive
				},
				success: res => {
					// if(this.chooseActive == '1'){
						this.loading= false;
						this.likeData = this.reload ? res.data.data : this.likeData.concat(res.data.data); //评论数据 追加
						this.current_page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
						this.status = res.data.total == 0 ? 'noMore' : 'more';
					// }else{
					// 	this.loading= false;
					// 	this.likeData = res.data; //
					// 	this.status = 'noMore';
					// }
				}
			});
		},
		choose(e){
			console.log("===e",e)
			this.chooseActive = e;
			this.current_page = 1;
			this.reload = true;
			this.likeData = [];
			this.loadlikeData();
		}
	}
};
</script>

<style>
.wanl-money .balance {
	margin: 10rpx 25rpx 25rpx 25rpx;
}

.wanl-money .balance .details {
	padding: 50rpx 0;
}

.wanl-money .balance .operate {
	display: flex;
	align-items: center;
	justify-content: space-around;
	background: rgba(0, 0, 0, 0.1);
	height: 80rpx;
	color: #fff;
}
.wanl-money .cu-list{
	margin-top:40px;
}
.wanl-money .cu-list.menu-avatar>.cu-item{
	height: 180rpx;
	align-items: flex-start;
	padding: 25rpx 0;
	margin: 26rpx 0 0;
}

.wanl-money .cu-list.menu-avatar>.cu-item .cu-avatar {
	width: 125rpx;
	height: 125rpx;
	left: 25rpx;
	margin-top: 6rpx;
}

.wanl-money .cu-list.menu-avatar>.cu-item .content {
	left: 180rpx;
	width: calc(100% - 75rpx - 25rpx -150rpx);
	line-height: 1.5em;
}

.wanl-money .cu-list.menu-avatar>.cu-item .action{
	width: 130rpx;
	height: 100%;
	text-align: right;
	margin-right: 25rpx;
}
.edgeInsetTop{
	position: fixed;
	top: 40px;
	z-index: 1000;
	width: 100vw;
	padding: 20rpx 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	view{
		width:50%;
		display: flex;
		justify-content: center;
		align-items: center;
		position:relative;
		&.active{
			color: #FC6A24;
			&:after{
				content: "";
				position: absolute;
				bottom: -20rpx;
				left: 35%;
				width: 30%;
				height: 8rpx;
				background:#FC6A24 ;
			}
		}
	}
	
}
.font-red{
	color: #FC6A24;
}
.green{
	color:#28C445;
}
.red{
	color: #FC6A24;
}
</style>
